<template>
  <div>
    <e-chart :option="pie_worker_boss" style="height: 800px; width: 100vw"></e-chart> <!--固定组件尺寸-->
    <e-chart :option="bar_worker_boss_task" style="height: 800px; width: 100vw"></e-chart>
    <e-chart :option="stratifiedPie_device_system" style="height: 1000px; width: 100vw"></e-chart>
    <e-chart :option="pie_taskCategory" style="height: 800px; width: 100vw"></e-chart>
  </div>
</template>


<script>
import EChart from '@/components/new/echarts/EChart'
import {loadGraph1,loadGraph2,loadGraph3,loadGraph4} from "@/api/admin";
export default {
  name: "platformVisualization",
  components: {EChart},
  data() {
    return {
      pie_worker_boss: undefined,
      bar_worker_boss_task:undefined,
      stratifiedPie_device_system:undefined,
      pie_taskCategory: undefined,
    }
  },
  mounted() {
    this.pie_worker_boss = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '用户类型',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1, name: '发包方' },
            { value: 1, name: '工人' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.bar_worker_boss_task = {
      xAxis: {
        type: 'category',
        data: ['发包方总数','工人总数', '现有任务', '活跃工人数']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [
            {
              value: 1,
              itemStyle: {
                color: '#EE6666'
              }
            },
            {
              value: 1,
              itemStyle: {
                color: '#3BA272'
              }
            },
            {
              value: 1,
              itemStyle: {
                color: '#73C0DE'
              }
            },
            {
              value: 1,
              itemStyle: {
                color: '#FAC858'
              }
            },
          ],
          type: 'bar'
        }
      ]
    };
    this.stratifiedPie_device_system = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        data: [
          'WindowsXP',
          'Windows7',
          'Windows10',
          'Windows11',
          'IOS12',
          'IOS13',
          'IOS14',
          'IOS15',
          'Android12',
          'Android11',
          'Android10',
          'Android9',
          'Android8',
          'HarmonyOS1',
          'HarmonyOS2',
          'HarmonyOS3'
        ]
      },
      series: [
        {
          name: '系统类型',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1, name: 'Windows' },
            { value: 1, name: 'IOS' },
            { value: 1, name: 'HarmonyOS'},
            { value: 1, name: 'Android'}
          ]
        },
        {
          name: '系统版本',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          },
          data: [
            { value: 1, name: 'WindowsXP' },
            { value: 1, name: 'Windows7' },
            { value: 1, name: 'Windows10' },
            { value: 1, name: 'Windows11' },
            { value: 1, name: 'IOS12' },
            { value: 1, name: 'IOS13' },
            { value: 1, name: 'IOS14' },
            { value: 1, name: 'IOS15' },
            { value: 1, name: 'Android12' },
            { value: 1, name: 'Android11' },
            { value: 1, name: 'Android10' },
            { value: 1, name: 'Android9' },
            { value: 1, name: 'Android8' },
            { value: 1, name: 'HarmonyOS1' },
            { value: 1, name: 'HarmonyOS2' },
            { value: 1, name: 'HarmonyOS3' },
          ]
        }
      ]
    };
    this.pie_taskCategory = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '任务类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1, name: '功能测试' },
            { value: 1, name: '性能测试' },
            { value: 1, name: 'Bug探索' }
          ]
        }
      ]
    };
    this.loadGraph();
  },
  methods: {
    loadGraph(){
      loadGraph1().then(res=>{
        if(res.code === 200){
          const res_array = res.data;
          for(let index=0; index<2; index++){
            this.pie_worker_boss.series[0].data[index].value = res_array[0].items[index].value;
          }
          this.pie_worker_boss = {...this.pie_worker_boss};
        }else{
          throw new Error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });

      loadGraph2().then(res=>{
        if(res.code === 200){
          const res_array = res.data;
          for(let index=0; index<4; index++){
            this.bar_worker_boss_task.series[0].data[index].value = res_array[0].items[index].value;
          }
          this.bar_worker_boss_task = {...this.bar_worker_boss_task};
        }else{
          throw new Error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });

      loadGraph3().then(res=>{
        if(res.code === 200){
          const res_array0 = res.data[0];
          const res_array1 = res.data[1];
          for(let index=0; index<4; index++){
            this.stratifiedPie_device_system.series[0].data[index].value = res_array0.items[index].value;
          }
          for(let index=0; index<16; index++){
            this.stratifiedPie_device_system.series[1].data[index].value = res_array1.items[index].value;
          }
          this.stratifiedPie_device_system = {...this.stratifiedPie_device_system};
        }else{
          throw new Error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });

      loadGraph4().then(res=>{
        if(res.code === 200){
          const res_array = res.data;
          for(let index=0; index<3; index++){
             this.pie_taskCategory.series[0].data[index].value = res_array[0].items[index].value;
          }
          this.pie_taskCategory = {...this.pie_taskCategory};
        }else{
          throw new Error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
  }
}
</script>

<style scoped>

</style>